<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father {
				overflow: hidden;
				margin: 100px auto;
				width: 300px;
				height: 300px;
				background-color: aquamarine;
				text-align: center;
			}

			.son {
				width: 200px;
				height: 200px;
				margin: 50px;
				background-color: #FFA500;
				line-height: 200px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
				son盒子
			</div>
		</div>
		<script type="text/javascript">
			//dom事件流三个阶段
			//1.JS代码中只能执行捕获或者冒泡其中的一个阶段
			//2.onclick和attachEvent IE  只能得到冒泡阶段
			//3.捕获阶段  如果addEventListener 第三个参数true,表示处于捕获阶段
			//document -> html -> body -> father -> son
			// var son = document.querySelector('.son');
			// son.addEventListener("click", function() {
			// 	alert("son");
			// }, true);
			// var father = document.querySelector(".father");
			// father.addEventListener("click", function() {
			// 	alert("father");
			// }, true);

			//4.冒泡阶段 如果addEventListener第三个参数是false 或者 省略 那么处于冒泡阶段
			// son -> father -> body -> html -> document
			var son = document.querySelector('.son');
			son.addEventListener("click", function() {
				alert("son");
			}, false);
			var father = document.querySelector(".father");
			father.addEventListener("click", function() {
				alert("father");
			}, false);
			document.addEventListener("click", function() {
				alert("document");
			}, false);
		</script>
	</body>
</html>
